<template>
      <ul >
        <li v-for="(item, index) in name" :key="index" @click="toDetails(item.pid)">
          <a >
            <img :src="require('../../'+item.pic)" alt />
          </a>
          <p>
            <a>{{item.pname}}</a>
          </p>
          <p>
            <a >{{item.ptitle}}</a>
          </p>
          <p>
            <a >¥{{item.pprice1}}</a>
          </p>
        </li>
      </ul>
</template>

<script>
export default {
  // 接受父组件的值
  props:{
    name:'',
  },
  data() {
    return {
    };
  },
  methods: {
    toDetails(pid){
      this.$router.push(`/details?pid=${pid}`)
    }
  },
};
</script>

<style scoped>
li{
  list-style: none;
}
ul {
  margin: 0;
  padding: 0;
  width: 955px;
  height: 614px;
  margin-left:50px ;
  display: flex;
  justify-content: space-every;
  flex-wrap: wrap;
}
 ul > li {
  margin: 0 2px;
  width: 234px;
  height: 300px;
  background-color: #fff;
  transition: all 0.2s linear;
}
ul > li:hover {
  margin-top: -3px;
  box-shadow: 5px 5px 5px #ccc;
}
 ul > li img {
  width: 160px;
  height: 160px;
}
ul > li > a {
  display: block;
  text-align: center;
}
 ul > li > p {
  text-align: center;
}
ul > li > p:nth-child(2) > a {
  font-size: 14px;
  color: #333;
}
 ul > li > p:nth-child(3) > a {
  font-size: 12px;
  color: #b0b0b0;
}
 ul > li > p:nth-child(4) > a {
  font-size: 14px;
  color: #ff6700;
}

</style>